Frontend WebHID Enhetsuppräkning: Upptäck Anslutna Enheter med JavaScript

WebHID API öppnar möjligheten för webbapplikationer att kommunicera direkt med ett brett utbud av Human Interface Devices (HID) som vanligtvis bara är tillgängliga för nativa applikationer. Detta öppnar spännande möjligheter för att skapa innovativa webbupplevelser som interagerar med specialiserad hårdvara som spelkontroller, anpassade inmatningsenheter, vetenskapliga instrument och mer. Den här omfattande guiden dyker ner i kärnkonceptet enhetsuppräkning, vilket är det avgörande första steget för att upprätta en anslutning till en önskad HID-enhet.

Vad är WebHID API?

WebHID API tillåter webbapplikationer att komma åt Human Interface Devices. Dessa enheter omfattar en bred kategori, inklusive:

• Spelkontroller: Joysticks, gamepads, racingrattar
• Inmatningsenheter: Tangentbord, möss, trackballs
• Industriella kontroller: Specialiserade kontrollpaneler, sensorgränssnitt
• Vetenskapliga instrument: Dataförvärvsenheter, mätverktyg
• Anpassad hårdvara: Skräddarsydda inmatningsenheter skapade för specifika ändamål

Till skillnad från äldre webbläsar-API:er som erbjöd begränsat HID-stöd, ger WebHID API direkt åtkomst till HID-enheter, vilket gör det möjligt för utvecklare att skapa rikare och mer interaktiva webbapplikationer. Föreställ dig att styra en robotarm i ett avlägset laboratorium, manipulera en 3D-modell med en anpassad inmatningsenhet eller ta emot sensordata direkt i en webbaserad instrumentpanel - allt inom webbläsaren.

Förstå HID-enhetsuppräkning

Innan du kan interagera med en HID-enhet måste din webbapplikation upptäcka vilka enheter som är anslutna till användarens system. Denna process kallas enhetsuppräkning. WebHID API tillhandahåller en mekanism för att begära åtkomst till specifika HID-enheter baserat på leverantörs-ID (VID) och produkt-ID (PID) eller genom att använda ett bredare filter.

Processen innebär vanligtvis dessa steg:

1. Begära enhetsåtkomst: Webbapplikationen uppmanar användaren att välja en HID-enhet med navigator.hid.requestDevice().
2. Filtrera enheter: Du kan ange filter för att begränsa listan över enheter som presenteras för användaren. Dessa filter är baserade på VID och PID för enheten.
3. Hantera enhetsval: Användaren väljer en enhet från listan.
4. Öppna enheten: Applikationen öppnar en anslutning till den valda enheten.
5. Dataöverföring: När anslutningen har upprättats kan applikationen skicka och ta emot data från enheten.

Steg-för-steg-guide till enhetsuppräkning

1. Begära enhetsåtkomst med filter

Metoden navigator.hid.requestDevice() är startpunkten för att begära åtkomst till HID-enheter. Den tar ett valfritt `filters`-argument, vilket är en array av objekt som specificerar VID och PID för de enheter du vill hitta.

Här är ett exempel på hur du begär åtkomst till en enhet med ett specifikt VID och PID:

async function requestHIDDevice() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          vendorId: 0x1234, // Ersätt med din enhets leverantörs-ID
          productId: 0x5678 // Ersätt med din enhets produkt-ID
        },
        // Lägg till fler filter för andra enheter om det behövs
      ]
    });

    if (devices.length > 0) {
      const device = devices[0]; // Använd den första valda enheten
      console.log("HID Device Found:", device);
      // Öppna enheten och starta kommunikationen
      await openHIDDevice(device);
    } else {
      console.log("No HID device selected.");
    }
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

// Exempel på användning (t.ex. utlöst av ett knapptryck):
document.getElementById('requestButton').addEventListener('click', requestHIDDevice);

Viktiga överväganden:

• Leverantörs-ID (VID) och Produkt-ID (PID): Dessa är unika identifierare som tilldelas USB- och Bluetooth-enheter. Du måste hämta VID och PID för din målenhet från tillverkarens dokumentation eller med hjälp av systemverktyg (t.ex. Enhetshanteraren i Windows, Systeminformation i macOS eller `lsusb` i Linux).
• Användarens samtycke: Metoden requestDevice() visar en webbläsarstyrd behörighetsfråga för användaren, vilket gör att de kan välja vilka HID-enheter de vill ge åtkomst till. Detta är en avgörande säkerhetsåtgärd för att förhindra att skadliga webbplatser får åtkomst till känslig hårdvara utan användarens samtycke.
• Flera filter: Du kan inkludera flera filter i `filters`-arrayen för att begära åtkomst till enheter med olika VID och PID. Detta är användbart om din applikation stöder flera hårdvarukonfigurationer.

2. Hämta enhetsinformation

När användaren har valt en enhet returnerar metoden requestDevice() en array av HIDDevice-objekt. Varje HIDDevice-objekt innehåller information om enheten, som dess VID, PID, usagePage, usage och samlingar. Du kan använda denna information för att ytterligare identifiera och konfigurera enheten.

async function openHIDDevice(device) {
  try {
    await device.open();
    console.log("HID Device Opened:", device.productName);

    // Lyssna efter inmatningsrapporter
    device.addEventListener("inputreport", event => {
      const { data, reportId } = event;
      const uint8Array = new Uint8Array(data.buffer);
      console.log(`Received input report ${reportId}:`, uint8Array);
      // Bearbeta inmatningsrapportdata
    });

    device.addEventListener("disconnect", event => {
      console.log("HID Device Disconnected:", device.productName);
      // Hantera enhetsfrånkoppling
    });

  } catch (error) {
    console.error("Error opening HID device:", error);
  }
}

Enhetsegenskaper:

• vendorId: Enhetens leverantörs-ID.
• productId: Enhetens produkt-ID.
• productName: Det läsbara namnet på produkten.
• collections: En array av HIDCollectionInfo-objekt som beskriver enhetens HID-samlingar (rapporter, funktioner etc.). Detta kan vara mycket komplext och behövs bara för komplexa enheter.

3. Hantera enhetsanslutning och frånkoppling

WebHID API tillhandahåller händelser för att meddela din applikation när en enhet är ansluten eller frånkopplad. Du kan lyssna efter händelserna connect och disconnect på objektet navigator.hid.

navigator.hid.addEventListener("connect", event => {
  const device = event.device;
  console.log("HID Device Connected:", device);
  // Hantera enhetsanslutning (t.ex. öppna enheten igen)
});

navigator.hid.addEventListener("disconnect", event => {
  const device = event.device;
  console.log("HID Device Disconnected:", device);
  // Hantera enhetsfrånkoppling (t.ex. rensa resurser)
});

Bästa praxis för anslutningshantering:

• Omräkning vid anslutning: När en enhet ansluts är det ofta bra att räkna om enheter för att säkerställa att din applikation har en uppdaterad lista.
• Resursrensning vid frånkoppling: När en enhet kopplas från, släpp alla resurser som är associerade med den (t.ex. stäng enhetsanslutningen, ta bort händelselyssnare).
• Felhantering: Implementera robust felhantering för att hantera situationer där en enhet misslyckas med att ansluta eller kopplas från oväntat.

Avancerade tekniker för enhetsfiltrering

Utöver grundläggande VID- och PID-filtrering erbjuder WebHID API mer avancerade tekniker för att rikta in sig på specifika enheter. Detta är särskilt användbart när du hanterar enheter som har flera gränssnitt eller funktioner.

1. Filtrera efter användningssida och användning

HID-enheter är organiserade i *användningssidor* och *användningar*, som definierar vilken typ av funktionalitet en enhet tillhandahåller. Till exempel tillhör ett tangentbord användningssidan "Generic Desktop" och har en "Tangentbord"-användning. Du kan filtrera enheter baserat på deras användningssida och användning för att rikta in dig på specifika enhetstyper.

async function requestSpecificKeyboard() {
  try {
    const devices = await navigator.hid.requestDevice({
      filters: [
        {
          usagePage: 0x01, // Generic Desktop Page
          usage: 0x06      // Keyboard Usage
        }
      ]
    });

    // ... (rest of the code to handle the device)
  } catch (error) {
    console.error("Error requesting HID device:", error);
  }
}

Hitta användningssida och användningsvärden:

• HID-användningstabeller: De officiella HID-användningstabellerna (publicerade av USB Implementers Forum) definierar de standardiserade användningssidorna och användningarna för olika enhetstyper.
• Enhetsdokumentation: Enhetstillverkarens dokumentation kan ange användningssidan och användningsvärdena för deras enhet.
• HID-rapportbeskrivningar: För avancerade scenarier kan du analysera HID-rapportbeskrivningen för en enhet för att bestämma dess stödda användningssidor och användningar.

2. Hantera flera gränssnitt

Vissa HID-enheter exponerar flera gränssnitt, var och en med sin egen uppsättning funktioner. WebHID API behandlar varje gränssnitt som en separat HID-enhet. För att komma åt ett specifikt gränssnitt kan du behöva kombinera VID/PID-filtrering med användningssida/användningsfiltrering för att rikta in dig på önskat gränssnitt.

Praktiska exempel och användningsfall

1. Bygga ett anpassat spelkontrollgränssnitt

Föreställ dig att du bygger ett webbaserat spel och vill stödja en anpassad spelkontroll. Du kan använda WebHID API för att direkt läsa in data från kontrollerns knappar, joysticks och andra kontroller. Detta gör att du kan skapa en mycket responsiv och uppslukande spelupplevelse.

2. Skapa en webbaserad MIDI-kontroller

Musiker och ljudtekniker kan dra nytta av webbaserade MIDI-kontroller som interagerar med digitala ljudarbetsstationer (DAWs) eller synthesizers. WebHID API gör det möjligt för dig att bygga anpassade MIDI-kontroller som skickar och tar emot MIDI-meddelanden direkt i webbläsaren.

3. Interagera med vetenskapliga instrument

Forskare och vetenskapsmän kan använda WebHID API för att interagera med vetenskapliga instrument, såsom dataförvärvsenheter, sensorer och mätverktyg. Detta gör att de kan samla in och analysera data direkt i en webbaserad instrumentpanel eller analysverktyg.

4. Tillgänglighetsapplikationer

WebHID ger möjligheter att skapa hjälpmedelsteknik. Till exempel kan specialiserade inmatningsenheter för användare med motoriska nedsättningar integreras direkt i webbapplikationer, vilket ger mer anpassade och tillgängliga upplevelser. Globala exempel kan inkludera integrering av specialiserade ögonspårningsenheter för handsfree-navigering eller anpassningsbara knappmatriser för åtkomst med en enda brytare över olika språk och inmatningsmetoder.

Webbläsarövergripande kompatibilitet och säkerhetsöverväganden

1. Webbläsarstöd

WebHID API stöds för närvarande i Chromium-baserade webbläsare (Chrome, Edge, Opera) och är under utveckling för andra webbläsare. Innan du implementerar WebHID API i din applikation är det viktigt att kontrollera webbläsarkompatibiliteten och tillhandahålla fallback-mekanismer för webbläsare som inte stöder API:et.

2. Säkerhetsöverväganden

WebHID API är designat med säkerhet i åtanke. Webbläsaren uppmanar användaren att ge tillåtelse innan en webbapplikation får åtkomst till en HID-enhet. Detta förhindrar att skadliga webbplatser får åtkomst till känslig hårdvara utan användarens samtycke. Dessutom fungerar WebHID API inom webbläsarens säkerhetssandlåda, vilket begränsar applikationens åtkomst till systemresurser.

• Endast HTTPS: WebHID, liksom andra kraftfulla webb-API:er, kräver en säker kontext (HTTPS) för att fungera.
• Användargester: Att begära enhetsåtkomst kräver vanligtvis en användargest (t.ex. ett knapptryck) för att förhindra oönskade åtkomstbegäranden.
• Behörighets-API: Behörighets-API:et kan användas för att fråga och hantera WebHID-behörigheter.

Felsökning av vanliga problem

1. Enheten hittades inte

Om din applikation inte kan hitta HID-enheten, dubbelkolla VID och PID. Se till att de matchar enhetens faktiska identifierare. Kontrollera också att enheten är korrekt ansluten och känns igen av operativsystemet.

2. Behörighet nekad

Om användaren nekar behörighet att komma åt HID-enheten kommer din applikation inte att kunna kommunicera med den. Hantera detta scenario smidigt genom att visa ett meddelande för användaren och förklara varför åtkomst behövs. Överväg att tillhandahålla alternativa sätt för användaren att interagera med din applikation.

3. Dataformatproblem

HID-enheter använder ofta anpassade dataformat för att skicka och ta emot data. Du måste förstå enhetens dataformat och implementera lämplig parsning och serialiseringslogik i din applikation. Se enhetstillverkarens dokumentation för information om dataformatet.

Slutsats

WebHID API ger webbutvecklare möjlighet att skapa innovativa och interaktiva webbapplikationer som kommunicerar direkt med Human Interface Devices. Genom att förstå principerna för enhetsuppräkning, filtrering och anslutningshantering kan du frigöra den fulla potentialen hos WebHID API och skapa övertygande användarupplevelser. Omfamna kraften i WebHID för att ansluta webben till den fysiska världen och främja nya möjligheter till kreativitet, produktivitet och tillgänglighet över hela världen.

Ytterligare resurser

• WebHID API-specifikation
• WebHID API på Chrome Developers
• USB Implementers Forum (HID-information)